<template>
    <div>
        <!--商机信息-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 140px">
            <!--上-->
            <div>
                <el-row :gutter="20" style="height:41px">
                    <el-col :span="6" style="padding-top: 5px">
                            <i class="el-icon-s-check" style="padding-left: 0px;font-size: 25px;"></i>
                            <span style="font-weight: bold;font-size: 18px;margin-left: 10px">{{hetonlist.conNo}}</span>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <el-button class="el-icon-edit" style="margin-left: 100px">编辑</el-button>
                        <router-link style="margin-left: 20px" :to="{path:'/heton'}">
                            <el-button class="el-icon-back">返回</el-button>
                        </router-link>
                    </el-col>
                </el-row>
            </div>
            <!--下-->
            <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                <div style="height: 150px;margin-left: 10px;color: #BFBFBF">
                    <el-row type="flex" :gutter="20" style="margin-top: 20px">
                        <el-col :span="2">
                            <span style="color: gray">主题：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{hetonlist.conTheme}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">对应客户：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{hetonlist.clientId.clientName}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" style="margin-top: 15px">
                        <el-col :span="2">
                            <span style="color: gray">对应机会：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{hetonlist.busId.busName}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">合同编号：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{hetonlist.conNo}}</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!--进度详情-->
        <div style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: white;">
            <div>
                <template >
                    <el-tabs v-model="activeName" type="card" >
                        <el-tab-pane label="基本信息" name="first" style="height: 410px;">
                            <div class="shugan" style="margin-left: 20px;"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <el-form v-model="hetonlist" style="margin-left: 20px;" :label-position="labelPosition" >
                                <div>
                                    <div style="height: 150px;margin-left: 10px;">
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="3">
                                                <span style="color: gray">总金额：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{hetonlist.conTotal}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">毛利润：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hetonlist.conGross }}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="3">
                                                <span style="color: gray">客户签约人：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{hetonlist.conSignatory}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">我方签约人：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hetonlist.mySignatory}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">签约时间：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{hetonlist.conTime | formatDate}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">最终期限：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hetonlist.conDeadline | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">负责人：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{hetonlist.conPeople}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">备注：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{hetonlist.conRemark}}</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="订单" name="third">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加产品-->
                                    <div STYLE="margin-top: -5px">
                                        <router-link :to="{path:'/dindan'}">
                                            <el-button style="margin-left: 700px" size="small" type="primary" plain>订单列表</el-button>
                                        </router-link>
                                        <el-button style="margin-left: 10px" size="small" @click="xzdd()" type="primary" plain>根据该合同下单</el-button>
                                    </div>
                                    <!--合同表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 15px">
                                        <el-table
                                                :data="dindanlist"
                                                style="width: 100%"
                                                max-height="300"
                                                :default-sort = "{prop: 'date', order: 'descending'}"
                                                >
                                            <el-table-column
                                                    fixed
                                                    prop="orderNo"
                                                    label="订单编号"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderTheme"
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="合同"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.conId.conTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>h
                                            </el-table-column>
                                            <el-table-column
                                                    label="下单日期"
                                                    align="center"
                                                    sortable
                                                    width="160">
                                                <template slot-scope="d">
                                                    {{d.row.orderTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="完成日期"
                                                    align="center"
                                                    sortable
                                                    width="160">
                                                <template slot-scope="d">
                                                    {{d.row.orderWctime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderTotal"
                                                    label="金额"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="已回款金额"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="orderReturned">
                                            </el-table-column>
                                            <el-table-column
                                                    label="开票金额"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="orderInvoice">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderGross"
                                                    label="毛利"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderExchange"
                                                    label="是否换货"
                                                    sortable
                                                    align="center"
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderReturn"
                                                    label="是否退货"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderState"
                                                    label="状态"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderPeople"
                                                    label="负责人"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                fixed="right"
                                                label="操作"
                                                align="center"
                                                width="100">
                                                <template slot-scope="d">
                                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                    <i style="font-size:18px;color: #409EFF" @click="xiugai(d.row)" class="el-icon-edit"></i>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 840px;;font-size: 13px">
                                        <span>
                                             共{{this.dindanlist.length}}条订单:
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="产品详情" name="second">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 15px">
                                        <el-table
                                                :data="hetonxqlist"
                                                style="width: 100%"
                                                max-height="300"
                                                :default-sort = "{prop: 'date', order: 'descending'}"
                                                >
                                            <el-table-column
                                                    align="center"
                                                    prop="prodetailId.productName"
                                                    label="产品名称"
                                                    width="90">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="产品规格"
                                                    width="150">
                                                <template slot-scope="s">
                                                    <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                                        {{pro.modetContent}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="售价"
                                                    prop="condeJg"
                                                    width="90">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="数量"
                                                    width="150"
                                                    prop="condeNum">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="小计"
                                                    width="150"
                                                    prop="condeTital">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="折扣"
                                                    width="150"
                                                    prop="condeDiscount">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="备注"
                                                    prop="condeNote">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 800px;;font-size: 13px">
                                        <span>
                                            产品合计:
                                             {{hetonlist.conTotal}}(元)
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
        </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "ZHetonXq",
        data() {
            return {
                /*对齐方式*/
                labelPosition:'left',
                /*合同信息*/
                hetonlist:{
                    conId:0,
                    busId:{
                        busId:0,
                        client:null,
                        busName:''
                    },
                    clientId:{
                        clientId:0,
                        clientName:''
                    },
                    conNo:null,
                    conTheme:'',
                    conTotal:0,
                    conStarttime:'',
                    conFinishtime:'',
                    conSignatory:'',
                    mySignatory:'',
                    conTime:'',
                    conState:'',
                    conAccessory:null,
                    conRemark:null,
                    conPeople:null,
                    conZt:0,
                    conGross:0,
                    zcontractdetailsByConId:null,
                    zordersByConId:null
                },
                /*订单信息*/
                dindanlist:[],
                /*合同详情信息*/
                hetonxqlist:[],
                activeName:'first'

            }
        },
        methods: {
            xzdd(){
                this.print(this.hetonlist)
                this.$router.push({
                    path:'/ddxinzen',
                    query: {xzdd:this.hetonlist,dz:'htxq'}
                });
            },
            //修改方法
            xiugai(cp){
                window.console.log(cp)
                this.$router.push({
                    path:'/ddxinzen',
                    query: {key:cp}
                });
            },
            //订单查询方法
            ddcx(){
                this.$axios.get("http://localhost:8088/dindan/heton_dd",{params:{search:this.hetonlist.conId}})
                    .then(v=>{
                            this.dindanlist = v.data;
                        }
                    ).catch()
            },
            //合同详情方法
            xqcx(){
                this.$axios.get("http://localhost:8088/heton/list_htxqcp",{params:{search:this.hetonlist.conId}})
                    .then(v=>{
                            this.hetonxqlist = v.data;
                        }
                    ).catch()
            },
        },
        created: function () {
            if(this.$route.query.key!=null){
                this.hetonlist=this.$route.query.key;
                this.xqcx();
                this.ddcx();
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd  hh:mm:ss");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 50px;
    }
</style>